<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view
    style="min-height: 1600rpx;; width: 100%; background-color: rgb(246,248,251);"
  >
    <view
    v-if="!index&&!oneClick"
      style="
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        height: 70rpx;
        border-bottom: 1rpx solid rgb(220, 223, 230);
        padding-top: 48rpx;
      "
    >
      <text class="recom" :class="[isShow == 0 ? 'active' : '']" @click="choose(0)"
        >创意文案{{ copy.length?`(${copy.length})`:'' }}</text
      >
      <text class="recom" :class="[isShow == 1 ? 'active' : '']" @click="choose(1)"
        >个性文案{{ cusCopy.length?`(${cusCopy.length})`:'' }}</text
      >
    </view>
    <view v-if="isShow == 0">
      
      <uni-popup ref="fill">
        <view style="background-color: #fff;padding-bottom: 12rpx;">
      <view style="font-size: 24rpx; color: rgb(142, 84, 244); padding: 30rpx"
        >提示：下面填写的信息会在视频中体现，大数据匹配更准确！认真填写会大大提高生成的视频获得更好的本地流量</view
      >
      <view class="fill-out">
        <view class="product" style="border-bottom: 2rpx solid rgb(220,223,230);">
          <view>
            <text>产品</text>
            <span class="bixuan">*</span>
          </view>
          <input v-model="product" type="text" placeholder="如双人套餐" />
        </view>
        <view class="price" style="border-bottom: 2rpx solid rgb(220,223,230);">
          <view >
            <text>价格</text>
            <span class="bixuan">*</span>
          </view>
          <input v-model="price" type="text" placeholder="如29.9" />
        </view>
        <view class="price">
          <view>
            <text>昵称</text>
            <span class="bixuan">*</span>
          </view>
          <input v-model="name" type="text" placeholder="如王老板" />
        </view>
      </view>
      <button hover-class="hover" class="verify" @click="getCopy">生成文案</button>
      <view class="pack" @click="fillIn">收起<image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/wenan_icon_shouqi.png"/></view>
      </view>
      </uni-popup>
      <view style="overflow-y: scroll; padding: 0 30rpx">
        <view class="popup-content1">
          <view @click="check(item, index)" class="title-item" v-for="(item, index) in intCopy" :key="index">
            <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="item.checked"></aip-checkbox>
            </view>
            <view class="box-item">{{ item.content}}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="isShow == 1">
      <view class="feature">
        <view class="add" @click="addCopy()">
          <image
            style="width: 24rpx; height: 24rpx; margin-right: 6rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/mov_icon_tjiazse.png"
            mode=""
          />
          <text>添加新文案</text>
        </view>
      </view>
      <view class="betitle" v-for="(item, index) in cusCopy" :key="index">
        <view class="circle">{{ index + 1 }}</view>
        <view style="width: 486rpx">{{ item.content}}</view>
        <image
          @click="delTitle(item,index)"
          style="width: 31rpx; height: 31rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_shanchu.png"
          mode=""
        />
      </view>
    </view>
    <view style="height: 100rpx">
      <view class="bottom">
        <view v-if="!oneClick" class="btm-ai" @click="openAdd">
          <image style="width: 46rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/waszhi_icon_wadru.png"/>
          <text>产品库</text>
        </view>
        <view @click="checkAll" v-if="oneClick" style="display: flex;font-size: 28rpx;align-items: center;color: rgb(144,147,153);">
          <aip-checkbox :key="keys" :check="isAll"></aip-checkbox>
          全选
        </view>
        <button hover-class="hover" v-if="oneClick" style="width: 268rpx" class="bottom-queren1" @click="addCopy()">
          添加文案
        </button>
        <button hover-class="hover" style="width: 600rpx" :style="oneClick?'width: 268rpx !important':''" class="bottom-queren" @click="queren()">
          确认选择{{ copy.length + cusCopy.length? `(${copy.length + cusCopy.length})`:"" }}
        </button>
      </view>
    </view>
  </view>
  <uni-popup ref="add" :safe-area="false" @change="popupChange">
    <view class="popup">
      <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        添加文案素材
        <!-- <text @click="addOk" class="addbtn" :class="!cusTitle ? 'disable' : ''"
          >确定添加</text
        > -->
      </view>
      <text style="font-size: 24rpx;color: rgb(252,139,0);margin: 30rpx;">提示：12个字符自动换行，最多显示4行。</text>
      <view style="height: 1072rpx; padding: 30rpx; box-sizing: border-box">
        <view class="textarea">
          <fui-textarea 
            @input="textInput"
            maxlength="51"
            height="240rpx"
            marginTop="10"
            size="36"
            :borderTop="false"
            :borderBottom="false"
            :value ="cusTitle" 
            placeholder-style="color:rgb(144,147,153)" 
            placeholder="请输入内容" />
            </view>
      </view>
      <btnModule message="确认" @customClick="addOk" />
    </view>
  </uni-popup>
  <uni-popup ref="addO" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close1(0)"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        添加新产品
      </view>
      <view class="from">
        <view class="name">
          <text>产品名称<text style="color: rgb(255, 55, 71)">*</text></text>
          <input v-model="product" class="input" type="text" placeholder="如双人套餐">
        </view>
        <view class="name">
          <text>产品价格<text style="color: rgb(255, 55, 71)">*</text></text>
          <input v-model="price" class="input" type="digit" placeholder="如29.9">
        </view>
      </view>
      <!-- <twoButton
      @leftClick="openLibrary"
        @rightClick="getOk"
        left="文案库导入"
        right="生成文案"
        :disable="disable" /> -->
        <btnModule message="确认" @customClick="addTem" />
    </view>
    
  </uni-popup>
  <uni-popup ref="popup" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close1()"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        产品库
        <text @click="close1(1)" class="addbtn" :class="!cusTitle ? 'disable' : ''"
          >新增</text
        >
      </view>
      <view style="overflow-y: scroll;width: 100%;height: 733rpx;">
        <view class="tips">提示：系统根据产品自动生成文案内容，请选择与视频宣传相关的模板！</view>
        <view style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx 0 30rpx;margin-bottom: 30rpx;" @click="templateClick(item)" v-for="item in templates" :key="item.id">
          <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="templateId.id==item.id"></aip-checkbox>
        </view>
        <view class="item" :class="templateId.id==item.id?'active-tem':''" >
            <view class="name">
              <text>产品名称</text>
              <text class="text">{{item.product}}</text>
            </view>
            <view class="name">
              <text>产品价格</text>
              <text class="text">{{item.price}}</text>
            </view>
      </view>
        </view>
      <view class="flxed">
        <button hover-class="hover" @click="into" class="tianjia tianjia-style">导入</button>
      </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import aipCheckbox from "../../components/index/aip-checkbox.vue";
import twoButton from "../../components/index/twoButton.vue";
import btnModule from "../../components/index/btnModule.vue";
import { httpRequest } from "../../utils/http";
// import wuTextarea from "../../components/components/wu-textarea_1.0.1/components/wu-textarea/wu-textarea.vue"

export default {
  name: "UniPresetVueVite1Copywriting",
  components: {
    aipCheckbox: aipCheckbox,
    twoButton: twoButton,
    btnModule:btnModule
  },
  data() {
    return {
      shopInfo: {},
      intCopy: [],
      isShow: 0,
      intValue: "",
      customCopy: [],
      copyIndex: 0,
      customIndex: 0,
      isFlag: false,
      item: {},
      edit: false,
      product: "",
      price: "",
      copy: [],
      cusCopy: [],
      cusTitle: "",
      keys: "",
      isRefer: false,
      referList: [],
      border: "",
      character:'',
      shopName:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopName||'',
      shopTime:'',
      pack:false,
      selected:[],
      templates:[],
      templateId:'',
      saveCopy:[],
      show: false,
      index: 0,
      oneClick: 0,
      isAll:false,
      smart:'',
      same:''
    };
  },
  onLoad(e) {
    //智能剪辑
    if (e.smart) {
      this.smart = e.smart
      this.index = e.index
      this.$refs.popup.open('bottom')
    }
    //拍同款
    if (e.same) {
      this.same = e.same
      this.index = e.index
      this.$refs.popup.open('bottom')
    }
    //一键成片
    if (e.oneClick) {
      this.oneClick = e.oneClick
    }
    this.shopInfo = uni.getStorageSync("shop")[uni.getStorageSync('index')];
    console.log(this.shopInfo);
    this.getCustom();
    if (this.oneClick) {
      this.getCopy(1,2)
    } else {
      // this.getCopy(1,1)
    }
    this.getTemplate()
    if(uni.getStorageSync('copy')){
      this.selected = uni.getStorageSync('copy')
      this.copy = this.selected
    }
  },
  onUnload() {
    console.log('页面卸载');
  },
  methods: {
    checkAll() {
      this.isAll = !this.isAll
      if (this.isAll) {
        this.intCopy.forEach(e=>e.checked = true)
        this.copy = this.intCopy
      } else {
        this.copy = []
        this.intCopy.forEach(e => e.checked = false)
      }
    },
    popupChange(e){
      
      this.show = e.show
      console.log(this.show);
    },
    fillIn(){
      this.$refs.fill.close()
    },
  fillOut(){
    this.$refs.fill.open('top')
  },
    delTitle(item,i){
      this.cusCopy.splice(i,1)
      httpRequest('/api/delDiyCopy','POST',{diyCopyId:item.id})
    },
    // input(e){
    //   console.log(e);
    //   this.cusTitle = e.detail.value
    // },
    getInput(i) {
      // this.getCopy(1);
      this.border = i;
      this.cusTitle = this.referList[i].content;
    },
    refer() {
      console.log('refer');
      this.isRefer = true;
      this.getCopy(1)
    },
    close() {
      this.cusTitle=''
      this.$refs.add.close();
    },
    textInput(e){
      console.log(e);
      let result = '';
      let num = 1
      for (let i = 0; i < e.length; i++) {
        result += e[i];
        num++
        if(e[i+1]=='\n'){
          num=0
        }
        console.log(num);
        console.log(result);
        if (num==13) {
          result += '\n';
          num=1
        }
      }
      this.cusTitle = result
      console.log(this.cusTitle);
    },
    async addOk() {
      console.log(this.cusTitle);
      if (!this.cusTitle.trim()) return uni.showToast({
        title: '输入不能为空',
        icon: 'none'
      });
      console.log(this.cusTitle);
      const res = await httpRequest('/api/addDiyCopy','POST',{
        shopId: this.shopInfo.shopId,
        content:this.cusTitle
      })
      // this.cusCopy.push(res.data);
      this.$refs.add.close();
      this.cusTitle=''
      this.getCopy()
    },
    check(item, i) {
      console.log(item);
      if (item.checked) {
        item.checked = !item.checked;
        console.log(item.copywritingId);
        this.copy.forEach(e=>{
          if(item.id){
            if(e.id){
              if(item.id == e.id){
            e.checked = item.checked
          }
            }
            if(e.copywritingId){
              if(item.id == e.copywritingId){
                e.checked = item.checked
              }
            }
          }
          if(item.copywritingId){
            if(e.id){
              if(item.copywritingId == e.id){
                  e.checked = item.checked
                }
            }
            if(e.copywritingId){
              if(item.copywritingId == e.copywritingId){
                  e.checked = item.checked
                }
            }
          }
        })
        this.copy = this.copy.filter((e) => e.checked != false);
        this.isAll = false
      } else {
        item.checked = !item.checked;
        this.keys = this.keys == 1 ? 0 : 1;
        this.copy.push(item);
        if (this.copy.length >= this.intCopy.length)this.isAll = true
      }
      console.log(this.copy);
    },
    async editCopy(e) {
      this.edit = true;
      this.item = e;
      this.intValue = e.content;
      this.$refs.popup.open("bottom");
    },
    getIsFlag() {
      this.isFlag = !this.isFlag;
    },
    //添加自定义文案
    addCopy() {
      this.edit = false;
      this.$refs.add.open("bottom");
    },
    choose(n) {
      this.isShow = n;
    },
    //获取文案
    async getCopy(i,o) {
      let a = i
      uni.showLoading({
        title: '加载中,请稍后',
        mask: false
      })
      if(this.oneClick){
       const res = await httpRequest("/api/diyCopyListByShopId", "POST", {
          shopId: uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId,
          type: '',
        });
        console.log(res);
      this.intCopy = res.data;
      this.intCopy.map((e) => {
       if(this.selected.length){
        const x = this.selected.some(item=>{
          if(e.id&&item.id){
            return item.id == e.id
          }
          if(e.id&&item.copywritingId){
            return item.copywritingId == e.id
          }
          if(e.copywritingId&&item.copywritingId){
            return item.copywritingId == e.copywritingId
          }
          if(e.copywritingId&&item.id){
            return item.id == e.copywritingId
          }
        })
        console.log(x);
        x?e.checked = true:e.checked = false;
       }else{
        e.checked = false
       }
      });
      console.log(this.intCopy);
      if(a!=1) this.pack = false
      uni.hideLoading()
      this.shopName = ''
      this.character = ''
      this.shopTime = ''
      this.product = ''
      this.price = ''
      // this.$refs.addO.close()
      if (!o) {
        this.$refs.popup.close()
      }
      this.referList = [this.intCopy[this.ran(res.data.length)],this.intCopy[this.ran(res.data.length)],this.intCopy[this.ran(res.data.length)]]
      }else{
      const res = await httpRequest("/api/copywriting", "POST", {
        shopCate2Id: this.shopInfo.shopCate2Obj.shopCate2Id,
        shopId: this.shopInfo.shopId,
        product: this.product,
        price: this.price,
        character:this.character,
        shopName:this.shopName,
        shopTime:this.shopTime
      });
      console.log(res);
      this.intCopy = res.data;
      this.intCopy.map((e) => {
       if(this.selected.length){
        const x = this.selected.some(item=>{
          if(e.id&&item.id){
            return item.id == e.id
          }
          if(e.id&&item.copywritingId){
            return item.copywritingId == e.id
          }
          if(e.copywritingId&&item.copywritingId){
            return item.copywritingId == e.copywritingId
          }
          if(e.copywritingId&&item.id){
            return item.id == e.copywritingId
          }
        })
        console.log(x);
        x?e.checked = true:e.checked = false;
       }else{
        e.checked = false
       }
      });
      console.log(this.intCopy);
      if(a!=1) this.pack = false
      uni.hideLoading()
      this.shopName = ''
      this.character = ''
      this.shopTime = ''
      this.product = ''
      this.price = ''
      // this.$refs.addO.close()
      if (!o) {
        this.$refs.popup.close()
      }
      this.referList = [this.intCopy[this.ran(res.data.length)],this.intCopy[this.ran(res.data.length)],this.intCopy[this.ran(res.data.length)]]
      }
    },
    ran(n){
      return Math.floor(Math.random() * n)
    },
    popupClose() {
      this.$refs.popup.close();
      this.intValue = "";
    },
    //添加自定义文案
    async addCustom() {
      if (this.intValue.trim() == "")
        return uni.showToast({
          title: "文案不能为空",
        });
      if (this.edit) {
        uni.request({
          url: "https://www.diandianyouke.cn:8081/api/editDiyCopy",
          method: "POST",
          data: {
            shopId: this.item.shopId,
            content: this.intValue,
            id: this.item.id,
          },
          header: {
            "Content-Type": "application/json",
          },
          success: (res) => {
            console.log(res);
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
            this.getCustom();
            this.$refs.popup.close();
          },
          fail: () => {
            uni.showToast({
              title: "修改失败",
              icon: "none",
            });
          },
        });
      } else {
        const res = await httpRequest("/api/addDiyCopy", "POST", {
          shopId: this.shopInfo.shopId,
          content: this.intValue,
        });
        this.getCustom();
        this.$refs.popup.close();
      }
    },
    //获取自定义文案
    async getCustom() {
      const res = await httpRequest("/api/diyCopyListByShopId", "POST", {
        shopId: this.shopInfo.shopId,
      });
      console.log("获取" + res);
      this.customCopy = res.data;
    },
    //删除自定义文案
    async delCustom(id) {
      const res = await httpRequest("/api/delDiyCopy", "POST", { diyCopyId: id });
      console.log(res);
      this.getCustom();
    },
    chooseActive(i) {
      this.copyIndex = i;
    },
    chooseCustom(i) {
      if (this.customIndex == i) return (this.customIndex = -1);
      this.customIndex = i;
    },
    goCustom() {
      uni.navigateBack({ delta: 1 });
    },
    queren() {
      if(this.oneClick){
        uni.setStorageSync('copyPage','oneClick')
      }else if(this.smart){
        uni.setStorageSync('copyPage','smart')
      }else{
        uni.setStorageSync('copyPage','same')
      }
      uni.setStorageSync("copy", [...this.copy, ...this.cusCopy]);
      uni.navigateBack({ delta: 1 });
    },
    openAdd(){
      uni.vibrateShort()
      this.$refs.popup.open('bottom')
    },
    close1(i){
      if(i){
        this.$refs.popup.close()
        this.$refs.addO.open('bottom')
      }else{
        this.$refs.addO.close()
        this.$refs.popup.close()
      }
    },
    async getTemplate(){
      const res = await httpRequest('/api/getTemplate','POST',{
      shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
    })
    console.log(res);
    if(!res.data.length&&!this.oneClick){
      this.$refs.popup.close()
      this.$refs.addO.open('bottom')
      this.templates = res.data
  }
  let x = res.data
  let n = 0
  x.forEach(e=>{
    if(e.moRen==2){
      e.m=true
      n++
      this.shopName = e.shopName
      this.shopTime = e.shopTime
      this.price = e.price
      this.product = e.product
      this.character = e.character
    }else{
      e.m = false
    }
  })
  if(!n){
    x.forEach(e=>{
    if(e.moRen==1){
      e.m=true
      this.shopName = e.shopName
      this.shopTime = e.shopTime
      this.price = e.price
      this.product = e.product
      this.character = e.character
    }
  })
  }
  this.templates = x
    },
    templateClick(e){  
      uni.vibrateShort()
      this.templateId = e
    },
    async getOk(){
      if(!this.product.trim().length)return uni.showToast({title: '请输入产品名称',icon: 'none'})
      if(!this.price.trim().length)return uni.showToast({title: '请输入产品价格',icon: 'none'})
      if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(product.value))return uni.showToast({title:'不可以输入特殊字符',icon:'none'})
      uni.showLoading({
        title: '加载中,请稍后',
        mask: false
      })
      const res = await httpRequest("/api/copywriting", "POST", {
        shopCate2Id: this.shopInfo.shopCate2Obj.shopCate2Id,
        shopId: this.shopInfo.shopId,
        product: this.product,
        price: this.price,
      });
      console.log(res);
      this.intCopy = res.data;
      this.intCopy.map((e) => {
      e.checked = false
      });
      await uni.request({
      url: 'https://www.diandianyouke.cn:8081/api/addTemplate',
      data: {
        product:this.product.trim(),
        price:this.price.trim(),
        shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
      },
      timeout:50000,
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      method: 'POST',
    })
      uni.hideLoading()
      this.$refs.addO.close()
      this.referList = this.intCopy.filter((e, i) => {
        return i < 3;
      });
    },
    openLibrary(){
      this.$refs.addO.close()
      this.$refs.popup.open('bottom')
    },
    async addTem(){
      if(!this.product.trim().length)return uni.showToast({title: '请输入产品名称',icon: 'none'})
      if(!this.price.trim().length)return uni.showToast({title: '请输入产品价格',icon: 'none'})
      if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(this.product))return uni.showToast({title:'不可以输入特殊字符',icon:'none'})
      uni.showLoading({
        title: '添加中',
        mask: true
      })
      const res = await uni.request({
      url: 'https://www.diandianyouke.cn:8081/api/addTemplate',
      data: {
        shopName:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopName,
        product:this.product.trim(),
        price:this.price.trim(),
        shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
      },
      timeout:50000,
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      method: 'POST',
    })
    uni.hideLoading()
    uni.showToast({
      title:'添加成功',
      icon:'none'
    })
    this.templateId = res.data.data
    console.log(this.templateId);
    this.shopName = this.templateId.shopName
    this.shopTime = this.templateId.shopTime
    this.product = this.templateId.product
    this.price = this.templateId.price
    this.character = this.templateId.character
    this.getCopy()
    this.getTemplate()
    this.getCopy()
    this.$refs.addO.close()
    this.product = ''
    this.price = ''
    },
    into(){
      if(!this.templateId)return uni.showToast({title:'请先选择模板',icon:'none'})
      this.shopName = this.templateId.shopName
      this.shopTime = this.templateId.shopTime
      this.product = this.templateId.product
      this.price = this.templateId.price
      this.character = this.templateId.character
      this.getCopy()
    }
  },
};
</script>

<style lang="scss" scoped>
.items {
  position: relative;
  padding: 24rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 16rpx;
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(249, 249, 249, 1);
  .text-top {
    font-size: 32rpx;
    color: rgba(255, 55, 71, 1);
    font-weight: 700;
    margin-bottom: 12rpx;
  }
  .text-bottom {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(69, 70, 74, 1);
  }
  .img {
    position: absolute;
    top: 0;
    right: 0;
    width: 72rpx;
    height: 48rpx;
  }
  .top {
    display: flex;
    justify-content: space-between;
    .btn {
      display: flex;
      justify-content: flex-end;
      .edit {
        width: 88rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: rgba(69, 70, 74, 1);
        background-color: rgb(241, 241, 241);
        padding: 0;
        margin: 0;
        margin-right: 24rpx;
      }
      .del {
        width: 88rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: rgba(255, 55, 71, 1);
        background-color: rgba(255, 55, 71, 0.05);
        padding: 0;
        margin: 0;
      }
    }
  }
}
.recom {
  font-size: 32rpx;
  color: rgb(144, 147, 153);
}
.pack-down{
  width: 100%;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: rgb(142, 84, 244);
}
.fill-out {
  width: 690rpx;
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 30rpx;
    color: #45464a;
    padding: 0 30rpx;
    margin: 0 30rpx;
    margin-bottom: 30rpx;
    box-sizing: border-box;
  .product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 116rpx;
    border-bottom: 1px solid rgba(242, 246, 251, 1);
    text-align: right;
    .bixuan{
      color: rgb(255,55,71);
    }
  }
  .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 116rpx;
    text-align: right;
    .bixuan{
      color: rgb(255,55,71);
    }
  }
}
.verify {
  width: 690rpx;
  height: 88rpx;
  border: 1px solid rgba(142, 84, 244, 1);
  text-align: center;
  line-height: 88rpx;
  background-color: transparent;
  font-size: 32rpx;
  color: rgba(142, 84, 244, 1);
  border-radius: 428rpx;
}
.pack{
  display: flex;
  align-items: center;
  width: 110rpx;
  height: 48rpx;
  justify-content: space-between;
  font-size: 28rpx;
  color: rgb(144, 147, 153);
  margin: 57rpx auto 0;
}
.popup-content1 {
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 30rpx 30rpx;
    box-sizing: border-box;
  // height: 500rpx;
  .title-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 136rpx;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: rgb(69, 70, 74);
  }
  .box-item {
    width: 690rpx;
    min-height: 142rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #fff;
    font-size: 28rpx;
    color: rgb(69, 70, 74);
    margin-bottom: 24rpx;
    border: 2rpx solid rgba(0, 0, 0, 0);
  }
}
.bottom {
  position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150rpx;
    width: 100%;
    padding: 0 30rpx;
    background-color: #fff;
    box-sizing: border-box;
    .btm-ai{
      width: 60rpx;
      height: 78rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 20rpx;
      color: rgb(144, 147, 153);
      margin-right: 30rpx;
    }

  .bottom-quxiao {
    width: 330rpx;
    height: 86rpx;
    text-align: center;
    line-height: 88rpx;
    color: rgba(142, 84, 244, 1);
    border: 1px solid rgba(142, 84, 244, 1);
    margin: 0;
    margin-right: 18rpx;
  }
  .bottom-queren {
    width: 336rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    background-color: rgba(142, 84, 244, 1);
    color: #fff;
    margin: 0;
  }
  .bottom-queren1 {
    width: 336rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    background-color: #fff;
    color: rgb(142, 84, 244);
    border: 1px solid rgb(142, 84, 244);
    margin: 0;
  }
}
.active {
  color: rgba(142, 84, 244, 1);
  border-bottom: 2px solid rgba(142, 84, 244, 1);
  font-size: 32rpx;
  font-weight: 700;
}
.custom {
  display: flex;
  justify-content: space-between;
  padding: 16rpx;
  background-color: rgba(142, 84, 244, 0.1);
  border-radius: 8rp;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: rgba(142, 84, 244, 1);
  border-radius: 8rpx;
}
.popup-content {
  height: 648rpx;
  padding: 24rpx 32rpx;
  border-radius: 32rpx 32rpx 0 0;
  .text {
    font-size: 32rpx;
    height: 96rpx;
    font-weight: 700;
  }
  .input {
    margin-top: 50rpx;
    background-color: #fff;
    height: 88rpx;
    border-radius: 16rpx;
  }
}
.popup {
  width: 100%;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  .kong {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    .img {
      width: 610rpx;
      height: 368rpx;
      margin-top: 132rpx;
      margin-bottom: 42rpx;
    }
  }
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .accord {
    font-size: 28rpx;
    color: rgb(144, 147, 153);
    text-align: center;
    margin: 30rpx 0;
  }
  .textarea {
    position: relative;
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    border: 2rpx solid rgb(220, 223, 230);
    border-radius: 16rpx;
    // margin-bottom: 30rpx;
    font-size: 28rpx;
    // margin-left: 20rpx;
//     .pseudo-textarea-input {
//   width: 100%;
//   box-sizing: border-box;
//   padding: 10px;
//   border: none;
//   resize: both;
//   overflow: auto;
// }
  }
  .time {
    position: absolute;
    top: 507rpx;
    left: 60rpx;
    font-size: 28rpx;
    color: rgb(142, 84, 244);
  }
  .ignorant {
    font-size: 28rpx;
    text-align: right;
    color: rgb(69, 70, 74);
  }
  .refer {
    .tip {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      font-size: 24rpx;
      color: rgb(144, 147, 153);
      .change {
        display: flex;
        align-items: center;
        color: rgb(142, 84, 244);
        font-size: 28rpx;
      }
    }
    .box-item {
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
    }
  }
  .checked {
    border: 2rpx solid rgb(142, 84, 244) !important;
  }
  .popup-content {
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 905rpx;
    border-top: 2rpx solid rgb(220, 223, 230);
    border-bottom: 2rpx solid rgb(220, 223, 230);
    .title-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 136rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
    }
    .box-item {
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
    }
  }
  .cus-middle {
    padding: 30rpx;
    box-sizing: border-box;
    height: 905rpx;
    .cus-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cus-content {
        width: 618rpx;
        min-height: 214rpx;
        background-color: rgb(249, 249, 249);
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        .cus-image {
          text-align: right;
          margin-top: 24rpx;
        }
      }
    }
  }
  .bottom-btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    .all {
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
    }
    .verify {
      width: 552rpx;
      height: 86rpx;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      background-color: rgb(142, 84, 244);
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
}
.choose-active {
  border: 1px solid rgba(142, 84, 244, 1);
  background-color: rgba(142, 84, 244, 0.05);
}
.choose-custom {
  border: 1px solid rgba(142, 84, 244, 1);
}
.feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 690rpx;
    height: 80rpx;
    border: 2rpx solid rgba(142, 84, 244, 1);
    font-size: 30rpx;
    color: rgba(142, 84, 244, 1);
    border-radius: 16rpx
  }
}
.betitle {
  box-sizing: border-box;
  width: 690rpx;
  min-height: 142rpx;
  background-color: #fff;
  border-radius: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: rgb(69, 70, 74);
  margin-bottom: 24rpx;
  margin-left: 30rpx;
  .circle {
    width: 48rpx;
    height: 48rpx;
    border-radius: 356rpx;
    background-color: rgb(197, 163, 255);
    text-align: center;
    line-height: 48rpx;
    color: #fff;
  }
}
.flag {
  color: rgba(255, 55, 71, 1) !important;
}

.content{
  width: 100%;
  height: 1000rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .from{
    overflow-y: hidden;
    width: 690rpx;
    height: 235rpx;
    background-color: rgb(249,249,249);
    border-radius: 16rpx;
    padding: 0 30rpx;
    // padding-bottom: 356rpx;
    margin: 30rpx;
    box-sizing: border-box;
    .name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 630rpx;
      height: 116rpx;
      font-size: 30rpx;
      color: rgb(69,70,74);
      border-bottom: 1px solid rgb(220, 223, 230);
      &:last-child{
        border: none;
      }
      .input{
        text-align: right;
      }
    }

  }
  .tips{
    font-size: 24rpx;
    color: rgb(252,139,0);
    margin: 30rpx;
  }
  .item{
    width: 612rpx;
    // margin: 30rpx;
    border-radius: 24rpx;
    border: 1px solid rgb(220,223,230);
    .name{
      // width: 630rpx;
      margin: 36rpx 30rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgb(144,147,153);
      .text{
        color: rgb(69,70,74);
      }
    }
  }
  .flxed{
          width: 100%;
          height: 166rpx;
          position: fixed;
          bottom: 0;
          left: 0;
          background-color: #fff;
          .tianjia{
            width: 690rpx;
            height: 88rpx;
            margin: 10rpx 30rpx 0;
            font-size: 32rpx;
            text-align: center;
            line-height: 88rpx;
            background-color: rgba(241, 241, 241, 1);
            color: rgb(192,196,204);
          }
        }
}
.active-tem{
      border: 1px solid rgb(142, 84, 244) !important;
    }
    .tianjia-style{
      background-color: rgb(142,84,244) !important;
      color: #fff !important;
    }
</style>
